<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item>订单列表</el-breadcrumb-item>
		</el-breadcrumb>

		<!-- 卡片 -->
		<el-card>
			<el-row :gutter="20">
				<el-col :span="8">
					<!-- 搜索区域 -->
					<el-input placeholder="请输入内容" v-model="queryInfo.OrderCode" clearable @clear="getDataList">
						<el-button slot="append" icon="el-icon-search" @click="getDataList()"></el-button>
					</el-input>
				</el-col>
			</el-row>

			<!-- 表格区域 -->
			<el-table :data="datalist" border stripe style="width: 100%">
				<el-table-column type="index" width="40"></el-table-column>
				<el-table-column prop="orderCode" label="订单编号" width="400"></el-table-column>
				<el-table-column prop="orderPrice" label="订单价格" min-width="80"></el-table-column>
				<el-table-column prop="isPaid" label="是否付费" min-width="150">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.isPaid">已付款</el-tag>
						<el-tag type="danger" v-else>未付款</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="isDeliver" label="是否发货" min-width="150">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.isDeliver">已发货</el-tag>
						<el-tag type="danger" v-else>未发货</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="addTime" label="创建时间" width="200">
					<template slot-scope="scope">{{scope.row.addTime | dataFormat}}</template>
				</el-table-column>
				<el-table-column label="操作" min-width="200">
					<template slot-scope="scope">
						<!-- 修改按钮 -->
						<el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)"></el-button>
						<!-- 查看物流信息按钮 -->
						<el-button
							type="warning"
							icon="el-icon-location"
							size="mini"
							@click="logistics(scope.row.id)"
						></el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页区域 -->
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryInfo.page"
				:page-sizes="[1, 2, 5, 10]"
				:page-size="queryInfo.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</el-card>
		<editOrder :dialogVisible="editShow" :ID="ID" @handleClose="editClose()"></editOrder>
		<orderLogistics :dialogVisible="logisticsShow" :ID="ID" @DialdgClose="logisticsClose()"></orderLogistics>
	</div>
</template>

<script>
import editOrder from './EditOrder'
import orderLogistics from './OrderLogistics'
export default {
	data() {
		return {
			queryInfo: {
				OrderCode: '',
				page: 1,
				limit: 10
			},
			total: 10,
			datalist: [],
			//弹窗是否开启
			editShow: false,
			logisticsShow: false,
			ID: 0
		}
	},
	components: {
		editOrder,
		orderLogistics
	},
	created() {
		this.getDataList()
	},
	methods: {
		getDataList() {
			this.$get('/api/Order/GetOrderList', this.queryInfo).then(res => {
				if (res.code == 0) {
					this.datalist = res.data
					this.total = res.count
					console.log(res.data)
				}
			})
		},
		handleSizeChange(val) {
			this.queryInfo.limit = val
			this.getDataList()
		},
		handleCurrentChange(val) {
			this.queryInfo.page = val
			this.getDataList()
		},
		//修改
		edit(id) {
			//打开修改窗体
			this.editShow = true
			//把id参数传递给修改组件
			this.ID = id
		},
		logistics(id) {
			//打开修改窗体
			this.logisticsShow = true
			//把id参数传递给修改组件
			this.ID = id
		},
		//关闭修改弹窗
		editClose(val) {
			this.editShow = val
			console.log(val)
		},
		//关闭物流信息的弹窗
		logisticsClose(val) {
			this.logisticsShow = val
			console.log(val)
		}
	}
}
</script>

